<template>
  <form @submit="formSubmit" class='repair-form' report-submit>
    <div class="repairContainer">
          <div class='form-wrap'>
            <div class='search-line'>
              <input type='text' v-model='material'/>
              <button class='type-btn active'>搜索</button>
            </div>
            <div class='info-wrap'>
                <div class='info-line'>
                  <div class='info-label'>部门：</div>
                  <div class='info-content'>
                    <div class='value'>新时代集团</div>
                  </div>
                </div>
                <div class='info-line' @click='showTypeModal()'>
                  <div class='info-label'>物料分类：</div>
                  <div class='info-content'>
                    <div class='value'>{{type}}</div>
                    <div class='arrow-right' >
                      <i-icon type="enter" size="16" color="#c9d7db" />
                    </div>
                  </div>
                </div>
                <div class='info-line' @click='showNameModal()'>
                  <div class='info-label'>物料名称：</div>
                  <div class='info-content'>
                    <div class='value'>{{name}}</div>
                    <div class='arrow-right' >
                      <i-icon type="enter" size="16" color="#c9d7db" />
                    </div>
                  </div>
                </div>
                <div class='info-line'>
                  <div class='info-label'>规格型号：</div>
                  <div class='info-content'>
                    <div class='value'></div>
                  </div>
                </div>
                 <div class='info-line'>
                  <div class='info-label label-type'>数量：</div>
                  <div class='info-content'>
                    <i-input-number :value="useNumber1" max='10000'  min="1" step="1" @change="changeNumber1($event)" />
                    <button class='type-btn active'>添加</button>
                  </div>
                </div>
            </div>
            <div class='material-wrap'>
              <div class='material-line'>
                <div class='value'>LED普通螺旋灯泡</div>
                <i-input-number :value="useNumber2" max='10000'  min="1" step="1" @change="changeNumber2($event)" />
                <i-icon type="trash_fill"  size="26" color="#ff0000"/>
              </div>
            </div>
          </div>
          <i-row i-class='submit-line'>
              <button formType="submit" class='submit-btn'>生成领料单</button>
          </i-row>
    </div>
    <i-toast id="toast" />
    <i-modal  :visible="show1" :show-ok='false' :show-cancel='false' i-class='week-calendar'>
      <div class='week-wrap'>
        <radio-group  @change="handleChange1">
          <div class='week-line' v-for='(item,index) in typeList' :key='index' @click='changeIndex1(index)'>
            <div class='radio-wrap'>
              <image src='/static/images/icon_confirm@3x.png' v-if='selectIndex1==index'/>
              <image src='/static/images/icon_unconfirm.png' v-else/>
              <input type="radio" name="list" :value="index" :checked="selectIndex1==index" class='radio'>
            </div>
            <div :class='{active:selectIndex1==index}'>{{item.name}}</div>
          </div>
        </radio-group>
      </div>
    </i-modal>
    <i-modal  :visible="show2" :show-ok='false' :show-cancel='false' i-class='week-calendar'>
      <div class='week-wrap'>
        <radio-group  @change="handleChange2">
          <div class='week-line' v-for='(item,index) in nameList' :key='index' @click='changeIndex2(index)'>
            <div class='radio-wrap'>
              <image src='/static/images/icon_confirm@3x.png' v-if='selectIndex2==index'/>
              <image src='/static/images/icon_unconfirm.png' v-else/>
              <input type="radio" name="list" :value="index" :checked="selectIndex2==index" class='radio'>
            </div>
            <div :class='{active:selectIndex2==index}'>{{item.name}}</div>
          </div>
        </radio-group>
      </div>
    </i-modal>
  </form>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
      type:0,//0故障1巡检2维保
      state:0,//0派单1群发2二次派单3转单
      orderId:null,
      show1:false,
      selectIndex1:0,
      show2:false,
      selectIndex2:0,
      type:'',
      name:'',
      material:'',
      useNumber1:0,
      useNumber2:0,
      typeList:[
        {
          id:1,
          name:'固定资产'
        },
        {
          id:2,
          name:'设备工具'
        },
        {
          id:3,
          name:'业务配套用品'
        },
        {
          id:4,
          name:'其他'
        },
        {
          id:5,
          name:'广宣类'
        }
      ],
      nameList:[
        {
          id:1,
          name:'爆米花机专用灯泡'
        },
        {
          id:2,
          name:'投影仪灯泡'
        },
        {
          id:3,
          name:'普通球型灯泡'
        },
        {
          id:4,
          name:'烤肠机灯泡'
        },
        {
          id:5,
          name:'40W螺口灯泡'
        }
      ]
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  beforeMount() {

  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
      var query = this.$root.$mp.query;
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var params = currPage.data;
  },
  methods:{
    changeNumber1(event){
      const value = event.mp.detail.value;
      this.useNumber1 = value;
    },
    changeNumber2(event){
      const value = event.mp.detail.value;
      this.useNumber2 = value;
    },
    handleChange1(el,index){
      this.selectIndex1 = el.mp.detail.value;
      this.type = this.typeList[index].name;
      this.show1 = false
    },
    changeIndex1(index){
      this.selectIndex1 = index;
      this.type = this.typeList[index].name;
      this.show1 = false
    },
    handleChange2(el,index){
      this.selectIndex2 = el.mp.detail.value;
      this.name = this.nameList[index].name;
      this.show2 = false
    },
    changeIndex2(index){
      this.selectIndex2 = index;
      this.name = this.nameList[index].name;
      this.show2 = false
    },
    showTypeModal(){
      this.show1 = true;
    },
    showNameModal(){
      this.show2 = true
    }
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.repair-form{
  height: 100%;
  .repairContainer{
      height: 100%;
      display: flex;
      flex-direction:column ;
      .search-line{
        margin:40rpx 20rpx;
        display: flex;
        align-items: center;
        input{
          background: #fff;
          flex: 1;
          border:1px solid #ddd;
          border-radius:8rpx;
          height: 70rpx;
          line-height: 70rpx;
          margin-right:20rpx; 
        }
        .type-btn{
          height: 64rpx;
          line-height: 64rpx
        }
      }
      .material-wrap{
        background: #fff;
        margin: 40rpx 20rpx;
        border:1px solid #ddd;
        border-radius:8rpx;
        .material-line{
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 40rpx 0;
          border-bottom:1px solid #ddd;
          &:last-child{
            border-bottom: none
          }
          .value{
            color: #1380d3;
          }
        }
      }
      .form-wrap{
        flex:1;
        height: 50rpx;
        .info-wrap{
          margin:20rpx;
          border:1px solid #ddd;
          border-radius:8rpx;
          background: #fff;
          display: flex;
          flex-direction: column;
          .info-line{
            display: flex;
            justify-content:space-between;
            line-height:60rpx;
            padding:10rpx  20rpx;
            border-bottom:1px solid #dfe3e5;
            font-size:30rpx;
            .arrow-right{
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            &.btn-line{
              padding: 20rpx
            }
            &:last-child{
              border-bottom:none 
            }
            .info-label{
              color: #8a8a8a;
              &.ml10{
                margin-left:10rpx;
              }
            }
            .info-content{
              flex:1;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              overflow: hidden;
              width: 80%;
              .btn-line{
                width:90%;
                margin: 20rpx;
              }
              .value{
                flex:1;
                color:#338ed4;
                width: 80%;
                div{
                  width: 100%;
                  height: 60rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              .desc-wrap{
                display: flex;
                width: 100%
              }
              .desc{
                flex:1;
                padding:0 16rpx;
                height:140rpx;
                color: #8a8a8a;
              }
            }
          }
        }
      }
      .submit-line{
        margin:50rpx 0; 
        .submit-btn{
          width:70%;
          background: #1380d3;
          color:#fff!important;
          font-size:36rpx;
          border-radius:40rpx; 
          height: 80rpx;
          line-height: 80rpx;
        }
      }
  } 
  .type-btn{
    width:120rpx;
    height: 54rpx;
    line-height: 54rpx;
    border:2rpx solid #e7e7e9;
    font-size:26rpx;
    background: #fff;
    margin-right:16rpx;
    &.m20{
      margin-top: 16rpx;
    }
    &::after{
      border: none
    }
    &.active{
      border:2rpx solid #4d92c2!important;
      background:#1380d3!important;
      color: #fff;
    }
  }
  .week-calendar{
    &{
      view{
        padding-top:0;
        max-height: 100%;
        margin-bottom: 0;
      }
      .week-wrap{
        .week-line{
          height: 70rpx;
          line-height: 70rpx;
          display: flex;
          padding-left: 132rpx;
          .active{
            color: #1d7ebf
          }
          .radio-wrap{
            width: 60rpx;
            height: 60rpx;
            position: relative;
            image{
              position: absolute;
              left: 12rpx;
              top: 16rpx;
              width: 36rpx;
              height: 36rpx;
              z-index: 1;
            }
            .radio{
              position:absolute;
              left: 0;
              top: 0;
              z-index: 2;
              opacity: 0;
            }
          }
        }
      }
    }
  }
}
</style>
